import React, {Component} from 'react';
import Link  from 'next/link';
import { Spin,Tag,Icon } from 'antd';
import './index.less';
import { fromNow } from '../../utils'
import PropTypes from 'prop-types'
export default class ArticleItem extends Component {
    static propTypes = {
        item: PropTypes.object,
        actions:PropTypes.array
    }
    getAction(actions) {
        if (!actions || !actions.length) {
            return null;
        }
        const actionList = actions.map((action, index) => <li className="action-tool" key={`action-${index}`}>{action}</li>);
        return actionList;
    }
    
    render() {
        let {item,actions} = this.props;
        let actionDom = actions && actions.length ? (
            <ul>{this.getAction(actions)}</ul>
        ) : null;
        function transNum(num){
            return num/1000>1?(num/1000).toFixed(1)+'k':num;
        }
        return (
            <div className="post_item">
                <div className="post_header">
                    <Link as={`/p/${item._id}`} href={`/article?id=${item._id}`}>
                        <a target="_blank" className="topic_title">
                            {item.top ? <i className="post_badges">置顶</i>:''} 
                            {item.good ? <i className="post_badges">精华</i>:''} 
                            {item.title}
                        </a>
                    </Link>
                </div>
                <div className="post_body">
                {
                    item.img?(
                        <div className="post_cover">
                            <div className="post_cover_inner">
                                <img src={item.img} alt=""/>
                            </div>
                        </div>
                    ):''
                }
                    {
                        item.abstract?(
                            <p className="post_summary">
                                {item.abstract}
                            </p>
                        ):''
                    }
                </div>
                <div className="post_footer">
                    <div className="topic_info">
                        <Link as={`/u/${item.author._id}/me`} href={`/personal?userId=${item.author._id}&tab=me`}>
                            <a><img className="avatar" width="25" height="25" src={item.author.avatar} title={item.author.username} alt={item.author.username}/></a>  
                        </Link>    
                        <span><i className="fa fa-clock-o" aria-hidden="true"></i> {fromNow(item.create_time, 'YYYY-MM-DD HH:mm:ss')}</span>
                        <span>
                            <Link href={`/?type=${item.category_key}`}>
                                <a>
                                    <i className="fa fa-tags" aria-hidden="true"></i> <Tag> {item.category}</Tag>
                                </a>
                            </Link>
                        </span>
                        {item.pv_count>0?(<span><i className="fa fa-eye" aria-hidden="true"></i> {transNum(item.pv_count)}</span>):''}
                        {item.comment_count>0?(<span><i className="fa fa-comment" aria-hidden="true"></i> {transNum(item.comment_count)}</span>):''}
                        {item.like_count>0?(<span><i className="fa fa-thumbs-up" aria-hidden="true"></i> {transNum(item.like_count)}</span>):''}
                        {item.collection_count>0?(<span><i className="fa fa-star" aria-hidden="true"></i> {transNum(item.collection_count)}</span>):''}
                        {actionDom}
                    </div>
                </div>
            </div>
		);
	}
}
